import React from 'react'

const Register: React.FC = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 via-sky-50 to-cream-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        {/* Logo */}
        <div className="text-center mb-8">
          <div className="w-20 h-20 bg-gradient-to-br from-primary-400 to-primary-600 rounded-3xl flex items-center justify-center mx-auto mb-4 shadow-lg">
            <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"/>
            </svg>
          </div>
          <h1 className="text-3xl font-bold text-primary-800 mb-2">欢迎加入</h1>
          <p className="text-primary-600">注册绘本岛，开启亲子阅读之旅</p>
        </div>

        {/* 注册表单 */}
        <div className="bg-white rounded-3xl shadow-xl p-8">
          <form className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                手机号
              </label>
              <input
                type="tel"
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl focus:border-primary-300 focus:outline-none transition-colors"
                placeholder="请输入手机号"
              />
            </div>

            <div className="flex space-x-3">
              <div className="flex-1">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  验证码
                </label>
                <input
                  type="text"
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl focus:border-primary-300 focus:outline-none transition-colors"
                  placeholder="请输入验证码"
                />
              </div>
              <div className="flex flex-col justify-end">
                <button
                  type="button"
                  className="px-4 py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-2xl hover:from-primary-600 hover:to-primary-700 transition-all duration-200 font-medium"
                >
                  获取验证码
                </button>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                密码
              </label>
              <input
                type="password"
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl focus:border-primary-300 focus:outline-none transition-colors"
                placeholder="请设置密码（6-20位）"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                确认密码
              </label>
              <input
                type="password"
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl focus:border-primary-300 focus:outline-none transition-colors"
                placeholder="请再次输入密码"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                孩子昵称
              </label>
              <input
                type="text"
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl focus:border-primary-300 focus:outline-none transition-colors"
                placeholder="请输入孩子的昵称"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                孩子年龄
              </label>
              <select className="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl focus:border-primary-300 focus:outline-none transition-colors">
                <option value="">请选择孩子年龄</option>
                <option value="0-1">0-1岁</option>
                <option value="1-2">1-2岁</option>
                <option value="2-3">2-3岁</option>
                <option value="3-4">3-4岁</option>
                <option value="4-5">4-5岁</option>
                <option value="5-6">5-6岁</option>
                <option value="6-8">6-8岁</option>
                <option value="8-10">8-10岁</option>
                <option value="10-12">10-12岁</option>
              </select>
            </div>

            <div className="flex items-center">
              <input type="checkbox" className="rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
              <span className="ml-2 text-sm text-gray-600">
                我已阅读并同意
                <a href="#" className="text-primary-600 hover:text-primary-700">《用户协议》</a>
                和
                <a href="#" className="text-primary-600 hover:text-primary-700">《隐私政策》</a>
              </span>
            </div>

            <button
              type="submit"
              className="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-2xl hover:from-primary-600 hover:to-primary-700 transition-all duration-200 font-medium shadow-lg hover:shadow-xl"
            >
              注册
            </button>
          </form>

          {/* 分割线 */}
          <div className="relative my-6">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-gray-200"></div>
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-4 bg-white text-gray-500">或者</span>
            </div>
          </div>

          {/* 其他注册方式 */}
          <div className="space-y-3">
            <button className="w-full flex items-center justify-center py-3 border-2 border-gray-200 rounded-2xl hover:border-primary-200 transition-colors">
              <svg className="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="#07C160">
                <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.181-.62-.29-1.271-.29-1.94 0-3.581 3.068-6.494 6.859-6.494 1.64 0 3.131.547 4.345 1.455l.998-.77c.168-.13.389-.14.568-.03a.643.643 0 0 1 .313.53c0 .163-.07.327-.188.448l-1.554 1.395a.864.864 0 0 0-.216.664c0 .389.314.703.703.703.187 0 .36-.074.49-.204l1.512-1.523a.888.888 0 0 1 .633-.26c.337 0 .637.163.826.414.188.25.24.57.13.867l-.635 1.607a.289.289 0 0 0 .067.329c.11.11.29.11.4 0l1.478-1.316a.864.864 0 0 1 .717-.098 10.164 10.164 0 0 0 2.106.221c3.196 0 5.835-1.779 5.835-3.961 0-2.182-2.639-3.96-5.835-3.96-1.905 0-3.573.78-4.58 1.948a6.426 6.426 0 0 0-4.345-1.455c-3.79 0-6.858 2.913-6.858 6.494 0 .67.108 1.32.29 1.94.544-.026 1.096-.05 1.663-.05.389 0 .703.314.703.703 0 .389-.314.703-.703.703-1.41 0-2.812.04-4.19.117 2.24 2.24 5.14 3.61 8.285 3.61 3.79 0 6.859-2.913 6.859-6.494 0-2.182-2.64-3.961-5.835-3.961z"/>
              </svg>
              微信注册
            </button>
            
            <div className="text-center text-sm text-gray-600">
              已有账号？
              <a href="/login" className="text-primary-600 hover:text-primary-700 font-medium">
                立即登录
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Register